import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import { connect } from 'dva';
import { Layout } from 'antd';

import MerchantMenu from '../menu/Menu';
import BreadNav from '../breadNav/BreadNav';

import Main from '../../pages/main/Main';
import MerchantOrder from '../../pages/order/MerchantOrder';
import ReconciliateMng from '../../pages/settlement/Reconciliations';

import './styles.less';

const { Header, Content, Footer, Sider } = Layout;


class Root extends Component {

  state = {
    sliderData: '',
    initMenu: [],
  }
  componentDidMount() {
    this.props.dispatch({
      type: 'root/getBusniessLst',
    });
  }
  menuChange = (e) => {
    const { key } = e;
    const { history } = this.props;
    history.push({
      pathname: key,
    });
  }
  loginout = () => {
    this.props.dispatch({
      type: 'root/loginout',
    });
  }
  render() {
    const { location, history, root, login } = this.props;
    const { merchantInfo = {} } = login;
    const { menuData = [] } = root;
    return (
      <Layout className="g-container">
        <Sider
          collapsed={this.state.collapsed}
          className="g-slider-menu"
        >
          <MerchantMenu
            data={menuData}
            location={location}
            history={history}
          />
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }}>
            <BreadNav name={merchantInfo.name} location={location} loginout={() => this.loginout()} />
          </Header>
          <Content className="g-content">
            <Switch>
              <Route exact path="/main" component={Main} />
              <Route exact path="/order/merchant" component={MerchantOrder} />
              <Route exact path="/settlement/reconciliate" component={ReconciliateMng} />
              <Route exact path="/" render={() => (<Redirect to="/main" />)} />
            </Switch>
          </Content>
          <Footer style={{ textAlign: 'center', marginTop: 20 }}>
            {/* 版权声明 */}
          </Footer>
        </Layout>
      </Layout>
    );
  }
}


export default connect((state) => {
  return {
    root: state.root,
    login: state.login,
  };
})(Root);
